<template>
  <div id="login">
    <!-- 背景 -->
    <div class="header">
        <div class="inner-header flex" :style="changeHeight"></div>
        <div>
            <!--
                xmlns:SVG命名看见URI
                viewBox:定义当前视口（viewbox）中绘制区域的位置大小
                preserveeAspectRatio：定义了绘制区域在视口中的对齐方式
                shape-rendering：定义了形状的渲染方式（如何呈现头像的锯齿效果）
             -->
            <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
                <!-- 定义一个defs元素，用于存储各种元素的定义，可以被其他元素引用。
                    在defs元素中定义了一个名为“gentle-wave”的路径元素，用于描述波浪形状
                    改路径秒苏联一系列二次贝塞尔曲线的控制点坐标，从而实现了波浪形状 -->
                <defs>
                    <path id="gentle-wave"
                        d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
                </defs>
                <!-- 定义一个g元素，用于讲多个图形组合在一期，并应用一些样式
                    在g元素中使用use元素多次引用了赚钱定义的名为gentle-wave的路径元素
                    通过设置不同的x，y坐标和填充颜色，实现了波浪形状和渐变效果 -->
                <g class="parallax">
                    <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7)" />
                    <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
                    <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
                    <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
                </g>

            </svg>
        </div>
    </div>
    <!-- 界面 -->
    <div class="loginBox">
    <!-- 中英文切换 -->
      <div class="switch">
        <el-dropdown trigger="click" @command="handleCommand" placement="bottom">
          <span class="el-dropdown-link">
            <!-- 图标 -->
            <svg t="1676543460711" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1264" width="18" height="18">
              <path d="M568.25 483.78125h-8.0625l30.9375 172.5c20.53125-7.40625 39.09375-18.1875 55.5-32.53125-16.78125-20.53125-30.65625-43.3125-41.15625-67.6875l32.625-4.21875c9 18.46875 19.3125 34.78125 30.9375 48.84375 24.09375-29.25 42.65625-68.25 55.59375-117l-156.375 0.09375z m123.1875 140.0625c18.5625 16.125 39.75 27.84375 63.5625 35.15625l14.90625 4.59375-8.71875 31.78125-14.90625-4.59375c-28.59375-8.71875-54.9375-23.71875-77.25-43.6875-20.90625 18.75-45.375 33.09375-72 42L617.9375 805.25H493.71875l-16.6875 75.9375h389.25c18.28125 0 33.09375-14.8125 33.09375-33.09375V285.125c0-18.28125-14.8125-33.09375-33.09375-33.09375H518.5625l25.875 144.28125-1.03125-0.375 3 15.84375 0.46875-2.0625 7.3125 41.0625h80.25v-33.09375h62.0625v33.09375h103.5V483.875h-43.125c-14.4375 58.125-36.1875 104.90625-65.4375 139.96875zM459.78125 805.0625H157.71875c-36.5625 0-66.1875-29.625-66.1875-66.1875V175.90625c0-36.5625 29.625-66.1875 66.1875-66.1875h331.125l20.8125 109.21875h356.53125c36.5625 0 66.1875 29.625 66.1875 66.1875v562.96875c0 36.5625-29.625 66.1875-66.1875 66.1875H435.78125l24-109.21875z m-156.46875-255v-34.78125h-65.4375v-51.28125h60.84375V429.5h-60.84375v-43.6875h65.4375v-34.5H199.8125v198.65625h103.5z m159.9375 0V450.96875c0-18-4.125-31.78125-12.375-41.4375-8.25-9.5625-20.4375-14.34375-36.375-14.34375-9.375 0-17.71875 1.875-25.03125 5.625-7.3125 3.75-13.3125 9.46875-17.25 16.6875h-2.0625l-5.0625-19.40625h-28.6875v151.96875h37.5v-71.53125c0-17.90625 2.34375-30.75 7.03125-38.53125 4.59375-7.78125 12.28125-11.625 22.78125-11.625 7.6875 0 13.3125 2.71875 16.78125 8.25 3.5625 5.53125 5.34375 13.6875 5.34375 24.65625v88.78125H463.25z" p-id="1265"></path>
            </svg>
          </span>
          <el-dropdown-menu id="selectZE" slot="dropdown">
            <el-dropdown-item command="zh" v-bind:style="[this.$i18n.locale == 'zh' ? zeActive : '']" >简体中文</el-dropdown-item>
            <el-dropdown-item command="en" v-bind:style="[this.$i18n.locale == 'en' ? zeActive : '']" >English</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 项目名 -->
      <h2 class="Toptitle" :style="{height:'38px'}"><typeWriter text="ICE-PROJECT"></typeWriter></h2>
      <!-- 过渡效果 -->
      <transition-group name="el-zoom-in-center" tag="div">
        <!-- 登录样式 -->
        <div class="loginComBox" key="loginBox" v-show="ComShow=='loginBox'" id="loginComBox">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="loginCom">
              <!-- 用户框 -->
              <el-form-item prop="username">
                <el-input class="" :placeholder="$t('login.username')" prefix-icon="el-icon-user-solid" v-model="ruleForm.username" clearable></el-input>
              </el-form-item>
              
              <!-- 密码框 -->
              <el-form-item prop="password">
                <el-input class="" :placeholder="$t('login.password')" prefix-icon="el-icon-lock" v-model="ruleForm.password" show-password clearable></el-input>
              </el-form-item>
              
              <!-- 验证登录以及登录按钮框 -->
              <div class="vclongBox vcode mrgbto">
                <!-- 验证 -->
                <div>
                    <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
                    <el-button :style="{width:'100%'}" :type="btntype" @click="submit">{{$t(btntext)}}</el-button>
                </div>
                <!-- 登录 -->
                <el-button class="btn" @click="submitForm('ruleForm')" type="primary" >{{$t('login.login')}}</el-button>
              </div>
              
              <!-- 忘记密码选取 -->
              <div class="selectpws mrgbto">
                <el-checkbox>{{$t('login.rememberPassword')}}</el-checkbox>
                <el-link type="primary" :underline="false" @click="changeShow('logonBox')">{{$t('login.forgetPassword')}}?</el-link>
              </div>

              <!-- 其他方式登录 -->
              <div class="selectLogin mrgbto">
                <el-button plain size="small" @click="changeShow('phoneBox')">{{$t('login.phoneLogin')}}</el-button>
                <el-button plain size="small" @click="changeShow('QRCodeBox')">{{$t('login.QRCodeLogin')}}</el-button>
                <el-button plain size="small" @click="changeShow('registerBox')">{{$t('login.register')}}</el-button>
              </div>
              <!-- 第三方 -->
              <div class="title mrgbto">{{$t('login.thridLogin')}}</div>
              <!-- 第三方icon -->
              <div class="iconBox mrgbto">
                <div class="hover"><i class="iconfont icon-weixin"></i></div>
                <div class="hover"><i class="iconfont icon-xinlangweibo"></i></div>
                <div class="hover"><i class="iconfont icon-QQ"></i></div>
                <div class="hover"><i class="iconfont icon-zhifubaozhifu"></i></div>
              </div>
            </el-form>
        </div>
        <!-- 忘记密码样式 -->
        <div class="logonComBox" key="logonBox" v-show="ComShow=='logonBox'" id="logonComBox">
          <el-form :model="ruleFormLogon" :rules="rulesLogon" ref="ruleFormLogon" class="logonCom">
            <!-- 手机号 -->
            <el-form-item prop="phoneNumber">
              <el-input class="" maxlength="11" :placeholder="$t('login.phoneNumber')" prefix-icon="el-icon-mobile-phone" v-model.number="ruleFormLogon.phoneNumber" clearable></el-input>
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item prop="getVerifyCod">
              <div class="getVerifyCodStyle">
                <el-input class="inp" maxlength="4" :placeholder="$t('login.getVerifyCod')" prefix-icon="el-icon-key" v-model.number="ruleFormLogon.getVerifyCod" clearable></el-input>
                <el-button plain class="btn" @click="getVerifyCod" :disabled='IsDisabled'>{{$t(this.getVerifyCodText)}}</el-button>
              </div>
            </el-form-item>
            <!-- 密码框 -->
            <el-form-item prop="password">
              <el-input type="password" class="" :placeholder="$t('login.password')" prefix-icon="el-icon-lock" v-model="ruleFormLogon.password" clearable></el-input>
            </el-form-item>
            <!-- 确认密码框 -->
            <el-form-item prop="confirmPassword">
              <el-input type="password" class="" :placeholder="$t('login.surePassword')" prefix-icon="el-icon-lock" v-model="ruleFormLogon.confirmPassword" clearable></el-input>
            </el-form-item>
            <!-- 确认按钮 -->
            <el-button style="width:100%" class="mrgbto" @click="submitForm('ruleFormLogon')" type="primary" >{{$t('login.affirm')}}</el-button>
            <!-- 返回按钮 -->
            <el-button plain style="width:100%;margin:0;marginBottom:22px" class="mrgbto" @click="changeShow('loginBox')">{{$t('login.black')}}</el-button>
          </el-form>
        </div>
        <!-- 手机登录样式 -->
        <div class="phoneComBox" key="phoneBox" v-show="ComShow=='phoneBox'" id="phoneComBox">
          <el-form :model="ruleFormLogon" :rules="rulesLogon" ref="ruleFormLogon" class="logonCom">
            <!-- 手机号码 -->
            <el-form-item prop="phoneNumber">
              <el-input class="" maxlength="11" :placeholder="$t('login.phoneNumber')" prefix-icon="el-icon-mobile-phone" v-model.number="ruleFormLogon.phoneNumber" clearable></el-input>
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item prop="getVerifyCod">
              <div class="getVerifyCodStyle">
                <el-input class="inp" maxlength="4" :placeholder="$t('login.getVerifyCod')" prefix-icon="el-icon-key" v-model.number="ruleFormLogon.getVerifyCod" clearable></el-input>
                <el-button plain class="btn" @click="getVerifyCod" :disabled='IsDisabled'>{{$t(this.getVerifyCodText)}}</el-button>
              </div>
            </el-form-item>
          </el-form>
          <!-- 确认按钮 -->
          <el-button style="width:100%" class="mrgbto" @click="submitForm('ruleFormLogon')" type="primary" >{{$t('login.affirm')}}</el-button>
          <!-- 返回按钮 -->
          <el-button plain style="width:100%;margin:0;marginBottom:22px" class="mrgbto" @click="changeShow('loginBox')">{{$t('login.black')}}</el-button>
        </div>
        <!-- 二维码登录样式 -->
        <div class="QRCodeComBox" key="QRCodeBox" v-show="ComShow=='QRCodeBox'" id="QRCodeComBox">
          <!-- 二维码 -->
          <canvas ref="conf0" width="200" height="200" style="margin:0 auto">
          </canvas>
          <!-- 提示 -->
          <div class="title mrgbto">{{$t('login.CodeScanningPrompt')}}</div>
          <!-- 返回按钮 -->
          <el-button plain style="width:100%;margin:0;marginBottom:22px" class="mrgbto" @click="changeShow('loginBox')">{{$t('login.black')}}</el-button>
        </div>
        <!-- 注册样式 -->
        <div class="registerComBox" key="registerBox" v-show="ComShow=='registerBox'" id="registerComBox">
          <el-form :model="ruleFormLogon" :rules="rulesLogon" ref="ruleFormLogon" class="logonCom">
          <!-- 手机号 -->
          <el-form-item prop="phoneNumber">
            <el-input class="" maxlength="11" :placeholder="$t('login.phoneNumber')" prefix-icon="el-icon-mobile-phone" v-model.number="ruleFormLogon.phoneNumber" clearable></el-input>
          </el-form-item>
          <!-- 验证码 -->
          <el-form-item prop="getVerifyCod">
            <div class="getVerifyCodStyle">
              <el-input class="inp" maxlength="4" :placeholder="$t('login.getVerifyCod')" prefix-icon="el-icon-key" v-model.number="ruleFormLogon.getVerifyCod" clearable></el-input>
              <el-button plain class="btn" @click="getVerifyCod" :disabled='IsDisabled'>{{$t(this.getVerifyCodText)}}</el-button>
            </div>
          </el-form-item>
          <!-- 密码框 -->
          <el-form-item prop="password">
            <el-input type="password" class="" :placeholder="$t('login.password')" prefix-icon="el-icon-lock" v-model="ruleFormLogon.password" clearable></el-input>
          </el-form-item>
          <!-- 确认密码框 -->
          <el-form-item prop="confirmPassword">
            <el-input type="password" class="" :placeholder="$t('login.surePassword')" prefix-icon="el-icon-lock" v-model="ruleFormLogon.confirmPassword" clearable></el-input>
          </el-form-item>
          <!-- 确认按钮 -->
          <el-button style="width:100%" class="mrgbto" @click="submitForm('ruleFormLogon')" type="primary" >{{$t('login.affirm')}}</el-button>
          <!-- 返回按钮 -->
          <el-button plain style="width:100%;margin:0;marginBottom:22px" class="mrgbto" @click="changeShow('loginBox')">{{$t('login.black')}}</el-button>
        </el-form>
        </div>
      </transition-group>
    </div>
  </div>
</template>
<script>
import typeWriter from "../components/functionCom/type-writer.vue"
import Vcode from "vue-puzzle-vcode";
import { mapMutations } from "vuex";
export default {
  name: "LoginView",
  components: {
    Vcode,
    typeWriter
  },
  props: {},
  data() {
    // 密码验证
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleFormLogon.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      // 切换样式
      zeActive: {
        background: "rgb(64, 158, 255)",
        color: "rgb(244, 244, 245)",
      },
      pageName: "login.login", //页面名
      pageConnect: location.pathname, //页面地址
      // 控制波浪高度以及过渡效果
      changeHeight:{
        height:'60vh',
        transition:'all 3s ease-out'
      },
      // 动态绑定功能显示
      ComShow:'loginBox',
      // 拼图按钮样式
      btntype:"",
      // 按钮反馈机制
      btntext:"login.verify",
      isShow: false,
      // 登录表单验证
      ruleForm:{
        username:"admin",
        password:"abcd1234",
      },
      // 登录表单错误显示
      rules: {
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' }
          ],
          password:[
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
      },
      // 注册表单验证
      ruleFormLogon:{
        phoneNumber:"",
        getVerifyCod:"",
        password:"",
        confirmPassword:""
      },
      // 注册表单错误显示
      rulesLogon:{
        phoneNumber:[
          {required:true,message:"请输入手机号"},
          {type:'number',message:"请输入数字"},
          {pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式'}
        ],
        getVerifyCod:[
          {required:true,message:"请输入验证码"},
          {type:'number',message:"验证码必须为数字值"},
          {pattern:/^[0-9]{4,}$/,message:"验证码不完整"}
        ],
        password:[
          {required:true,message:"请输入密码"},
          {pattern:/^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9 _]{6,}$/,message:"至少包含一个字母一个数字密码长度至少为6"}
        ],
        confirmPassword:[
          {required:true,validator:validatePass2}
        ],
      },
      // 点击冷却时间
      burialTime:true,
      // 验证码显示
      getVerifyCodText:'login.getVerifyCod',
      // 是否禁用
      IsDisabled:false
    };
  },
  computed: {
  },
  methods: {
    ...mapMutations(["changePageName"]),
    // 中英文切换
    handleCommand(command) {
      this.$i18n.locale = command;
    },
    // 过渡结束事件
    changeTransitionend(id,boxText){
      this.ComShow = ''
      const dom = document.querySelector(id)
      const changeDom = document.querySelector("#logonComBox")
      var i = 0
      // console.log(i)
      console.log(dom.style.display)
      console.log(changeDom.style.display)
      dom.addEventListener("transitionend",()=>{
        if(i>0) return
        i++
        this.ComShow=boxText
        console.log(i)
      })
    },
    // 改变显示
    changeShow(boxText){
      if(boxText=='logonBox'){
        // this.changeTransitionend("#loginComBox",boxText)
        this.ComShow=""
        setTimeout(()=>{this.ComShow=boxText},300)
      }else if(boxText=='loginBox'){
        this.ComShow = ''
        setTimeout(()=>{this.ComShow=boxText},300)
      }else if(boxText=='phoneBox'){
        // this.changeTransitionend("#loginComBox",boxText)
        this.ComShow=''
        setTimeout(()=>{this.ComShow=boxText},300)
      }else if(boxText=='QRCodeBox'){
        this.ComShow=''
        setTimeout(()=>{this.ComShow=boxText},300)
      }else if(boxText=='registerBox'){
        this.ComShow=''
        setTimeout(()=>{this.ComShow=boxText},300)
      }else{
        return
      }
    },
    // 验证事件
    submit() {
      this.isShow = true;
    },

    onSuccess() {
      this.isShow = false; // 通过验证后，需要手动关闭模态框
      this.btntype="success"
      this.btntext="login.verifySuccess"
      console.log("验证成功")
    },

    onClose() {
      this.isShow = false;
      this.btntype="danger"
      this.btntext="login.validationFailed"
      console.log("验证失败")
    },
    // 表单验证
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if(this.ComShow=='loginBox'){
          if (valid) {
            if(this.btntype=="success"){
              this.$message.success('登录成功，前往首页')
              this.changeHeight.height="0vh"
              const timestamp = Date.now();
              sessionStorage.setItem("ice-token",timestamp)
              // 三秒后跳转
              setTimeout(()=>{
                this.$router.go(0)
              },2000)
            }else{
              this.$message.error('请完成拼图验证');
            }
          } else {
            this.$message.error('请输入账户或密码');
            return false;
          }
        }else if(this.ComShow=='logonBox'||this.ComShow=='registerBox'){
          if(valid){
            this.$message.success('注册成功,正在前往首页')
              this.changeHeight.height="0vh"
              // 三秒后跳转
              setTimeout(()=>{
                this.$router.push('/')
              },3000)
          }else{
            this.$message.error('内容不完整，请填写符合规定的内容');
            return false;
          }
        }
      });
    },
    // 获取验证码
    getVerifyCod(){
      let i = 60
      let setTime = setInterval(()=>{
        this.IsDisabled=true
        i--
        this.getVerifyCodText=`${i}秒后可获取`
        if(i<0){
          this.getVerifyCodText='login.getVerifyCod'
          clearInterval(setTime)
          this.IsDisabled=false
        }
      },1000)
    },
    // 创建Canvas函数
    createCanvas(){
      // 获取Canvas 画图
      let myCanvas = this.$refs.conf0
      var ctx = myCanvas.getContext('2d')
      var img = new Image();
      img.src = require('../../public/VerificationCode.png');
      img.onload = function(){
        ctx.drawImage(img, 0, 0)
      }
    }
  },
  created() {},
  mounted() {
    // 存储页面消息
    var getpageCon = {
      pageName: this.pageName,
      pageConnect: this.pageConnect,
    };
    // 储存在vuex
    this.changePageName(getpageCon);
    // console.log(this.$route)
    this.ComShow = 'loginBox'
    this.createCanvas()
  },
};
</script>
<style lang="scss" scoped>
.mrgbto{
  margin-bottom: 22px;
}
// 切换
.switch{
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 5000;
}
.post{
  position: absolute;
  transform-origin: center center;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
}
#login{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  .loginBox{
    width: 290px;
    // height: 100vh;
    position: absolute;
    transform-origin: center center;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px 40px 10px 40px;
    border-radius: 5px;
    
    // 内容
    .Toptitle{
      color: #999;
      font: 700 200% Consolas,Monaco,monospace;
      margin: 15px 0;
      text-transform: uppercase;
      margin-bottom: 20px;
    }
    // 登录界面样式
    .loginComBox{
      .vclongBox{
        display: flex;
        justify-content: space-between;
        .btn{
          flex:1 1 auto;
          margin-left: 5%;
        }
      }
      .selectpws{
        display: flex;
        justify-content: space-between;
      }
      .selectLogin{
        display: flex;
        justify-content: space-between;
      }
      .title{
        text-align:center;
        position:relative;
        font-size: 12px;
        color: #303133;
        justify-content: center;
        &:after{
          left:0;
          position: absolute;
          width:30%;
          height:1px;
          background:#606266;
          content:'';
          top:50%
        }
        &:before{
          right:0;
          position: absolute;
          width:30%;
          height:1px;
          background:#606266;
          content:'';
          top:50%;
        }
      }
      .iconBox{
        display: flex;
        justify-content: space-evenly;
        .hover{
          &:hover{
            cursor:default;
          }
        }
    }
    
    }
    // 忘记密码样式
    .logonComBox{
      // 验证码
      .getVerifyCodStyle{
        display: flex;
        justify-content: center;
        .inp{
          flex: 1 1 auto;
          margin-right: 5%;
        }
        .btn{
          flex: 1 1 auto;
        }
      }
    }
    // 手机登录样式
    .phoneComBox{
      // 验证码
      .getVerifyCodStyle{
        display: flex;
        justify-content: center;
        .inp{
          flex: 1 1 auto;
          margin-right: 5%;
        }
        .btn{
          flex: 1 1 auto;
        }
      }
    }
    // 二维码登录样式
    .QRCodeComBox {
      width: 290px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      .title{
        margin: 0 auto;
        text-align:center;
        position:relative;
        font-size: 12px;
        color: #303133;
        justify-content: center;
        width: 36%;
        padding: 0 6%;
        margin-bottom: 22px;
        &:after{
          left:0;
          position: absolute;
          width:calc(100%*2/36%*20%);
          height:1px;
          background:#606266;
          content:'';
          top:50%;
          left:calc(-100%*2/36%*15%);
          transform: scale(0.5);
        }
        &:before{
          right:0;
          position: absolute;
          width:calc(100%*2/36%*20%);
          height:1px;
          background:#606266;
          content:'';
          top:50%;
          right:calc(-100%*2/36%*15%);
          transform: scale(0.5);
        }
      }
    }
    // 注册账号样式
    .registerComBox{
      // 验证码
      .getVerifyCodStyle{
        display: flex;
        justify-content: center;
        .inp{
          flex: 1 1 auto;
          margin-right: 5%;
        }
        .btn{
          flex: 1 1 auto;
        }
      }
    }
  }
}
// 波浪
.header {
    position: relative;
    text-align: center;
    background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
    color: white;
}

.inner-header {
    height: 65vh;
    width: 100%;
    margin: 0;
    padding: 0;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.waves {
    position: relative;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px;
    min-height: 100px;
    max-height: 150px;
}

.content {
    position: relative;
    height: 20vh;
    text-align: center;
    background-color: white;
}

.parallax>use {
    /* 使use元素执行move-forever动画 */
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax>use:nth-child(1) {
    /* 延迟2秒启动动画  */
    animation-delay: -2s;
    /* 设置动画持续时间为7秒 */
    animation-duration: 7s;
}

.parallax>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}

.parallax>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}

.parallax>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

    100% {
        transform: translate3d(85px, 0, 0);
    }
}

@media (max-width: 768px) {
    .waves {
        height: 40px;
        min-height: 40px;
    }

    .content {
        height: 30vh;
    }

    h1 {
        font-size: 24px;
    }
}
</style>
